<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>boat-ui</title>
    <style>
      *, ::before, ::after {
        box-sizing: border-box;
      }
      * {
        margin: 0;
        padding: 0;
      }
      hr {
        margin: 10px 0;
      }
      .column {
        height: 100px;
      }

      .colContent {
        background: #4a90e2;
        width: 100%;
        height: 100%;
        border: 1px solid white;
      }

      .detail {
        border: 1px solid greenyellow;
      }

      .wrapper {
        height: 100vh;
      }

      .header, .sider, .footer {
        background: #4a90e2;
      }

      .content1 {
        background: #3a6fae;
      }
    </style>
</head>
<body>
<div id="app">
    <hr>
    <div>
        <b-collapse style="width: 80%;margin: 0 auto;" :selected.sync="selectedArray" single>
            <b-collapse-item title="标题1" name="1">内容1</b-collapse-item>
            <b-collapse-item title="标题2" name="2">内容2</b-collapse-item>
            <b-collapse-item title="标题3" name="3">内容3</b-collapse-item>
        </b-collapse>
    </div>
    <div style="height: 100px;display: flex;justify-content: center;align-items: center">
        <b-popover position="top">
            <template slot="content">
                <div>popover</div>
            </template>
            <b-button>点我</b-button>
        </b-popover>
        <b-popover position="bottom">
            <template slot="content">
                <div>popover</div>
            </template>
            <b-button>点我</b-button>
        </b-popover>
        <b-popover position="left">
            <template slot="content">
                <div>popover</div>
            </template>
            <b-button>点我</b-button>
        </b-popover>
        <b-popover position="right">
            <template slot="content">
                <div>popover</div>
            </template>
            <b-button>点我</b-button>
        </b-popover>
    </div>
    <hr>
    <div class="tabs">
        <b-tabs :selected="selectedTab">
            <b-tabs-head>
                <b-tabs-item name="sport">体育</b-tabs-item>
                <b-tabs-item name="game">游戏</b-tabs-item>
                <b-tabs-item name="book" disable>书籍</b-tabs-item>
                <template slot="actions">
                    <b-button>设置</b-button>
                </template>
            </b-tabs-head>
            <b-tabs-body>
                <b-tabs-pane name="sport">内容：体育</b-tabs-pane>
                <b-tabs-pane name="game">内容：游戏</b-tabs-pane>
                <b-tabs-pane name="book">内容：书籍</b-tabs-pane>
            </b-tabs-body>
        </b-tabs>
    </div>
    <hr>
    <div class="toast-test">
        <b-button @click="toast">点我</b-button>
    </div>
    <hr>
    <b-layout class="wrapper">
        <b-header>Header</b-header>
        <b-layout>
            <b-sider>Sider</b-sider>
            <b-content class="content1">Content</b-content>
        </b-layout>
        <b-footer>Footer</b-footer>
    </b-layout>
    <hr>
    <div>
        <b-row>
            <b-col class="column" span="2" :ipad="{span:'8'}" :narrow-pc="{span:'12'}"
            >
                <div class="colContent"></div>
            </b-col>
            <b-col class="column" span="22" :ipad="{span:'15'}" :narrow-pc="{span:'12'}"
            >
                <div class="colContent"></div>
            </b-col>
        </b-row>
        <b-row>
            <b-col class="column" span="12">
                <b-row class="colContent" align="right">
                    <b-col class="detail" span="5"></b-col>
                    <b-col class="detail" span="5"></b-col>
                    <b-col class="detail" span="5"></b-col>
                </b-row>
            </b-col>
            <b-col class="column" span="12">
                <div class="colContent"></div>
            </b-col>
        </b-row>
        <b-row>
            <b-col class="column" span="2">
                <div class="colContent"></div>
            </b-col>
            <b-col class="column" span="22">
                <div class="colContent"></div>
            </b-col>
        </b-row>
        <b-row>
            <b-col class="column" span="4">
                <div class="colContent"></div>
            </b-col>
            <b-col class="column" span="19" offset="1">
                <div class="colContent"></div>
            </b-col>
        </b-row>
        <b-row gutter="20">
            <b-col class="column" span="6">
                <div class="colContent"></div>
            </b-col>
            <b-col class="column" span="6">
                <div class="colContent"></div>
            </b-col>
            <b-col class="column" span="6">
                <div class="colContent"></div>
            </b-col>
            <b-col class="column" span="6">
                <div class="colContent"></div>
            </b-col>
        </b-row>
    </div>
    <hr>
    <div>
        <b-input value="张三"></b-input>
        <b-input value="李四" disabled></b-input>
        <b-input value="王五" read-only></b-input>
        <b-input value="王五" error="请输入正确信息"></b-input>
        {{ value1 }}
        <b-input v-model="value1"></b-input>
        {{ value2 }}
        <b-input :value="value2" @change="change"></b-input>
        <hr>
        <b-button :loading="loading1" @click="loading1=!loading1">按钮</b-button>
        <b-button icon="setting" icon-position="left" :loading="loading2" @click="loading2=!loading2">按钮</b-button>
        <b-button icon="setting" icon-position="right" :loading="loading3" @click="loading3=!loading3">按钮</b-button>
        <b-button-group>
            <b-button icon="left">上一页</b-button>
            <b-button>按钮</b-button>
            <b-button icon="right" icon-position="right">下一页</b-button>
        </b-button-group>
    </div>
</div>
<script src="./src/main.js"></script>
</body>
</html>
